<template>
	<div>
		<el-card class="messageBox">
			<div class="messageBoxSon">提示：✔️代表比赛，⭕代表其他活动</div>
		</el-card>
		<el-calendar>
			<template #dateCell="{ data }">
				{{ data.day.split('-').slice(1).join('-') }}
				<!-- {{ data.isSelected ? '✔️' : '' }} -->
				<div>
					<div v-for="(item, index) in gameTime.length" :key="index">
						<span :class="data.isSelected ? 'is-selected' : ''" @click="GameDetails(data.day)">{{
							data.day === gameTime[item - 1] ? '✔️' : ''
						}}</span>
					</div>
					<div v-for="(scheduleTimeItem, scheduleTimeIndex) in scheduleTime" :key="'A' + scheduleTimeIndex">
						<span :class="data.isSelected ? 'is-selected' : ''" @click="GameDetails(data.day)">{{ data.day === scheduleTimeItem ? '⭕' : '' }}</span>
					</div>
				</div>
			</template>
		</el-calendar>
	</div>
</template>

<script>
import { getAllGameInfo, getSchedule } from '@/api/gameModular/index.js';
export default {
	name: 'theGane',
	data() {
		return {
			gameTime: [],
			gameAllInfo: [],
			scheduleInfo: [],
			scheduleTime: [],
		};
	},
	created() {
		this.getAllGameData();
		this.getScheduleInfo();
	},
	methods: {
		async getAllGameData() {
			let res = await getAllGameInfo();
			if (res.statusCode === 20000) {
				this.gameAllInfo = res.data.records;
				this.gameAllInfo.forEach((val) => {
					let obj = {
						gameTime: val.gameTime,
					};
					this.gameTime.push(obj.gameTime);
				});
				for (var i = 0; i < this.gameTime.length && this.gameTime[i] != null; i++) {
					this.gameTime[i] = this.gameTime[i].substr(0, 10);
				}
			}
		},
		async getScheduleInfo() {
			let res = await getSchedule();
			if (res.statusCode === 20000) {
				this.scheduleInfo = res.data.records;
				this.scheduleInfo.forEach((val) => {
					let obj = {
						scheduleTime: val.affairUploadTime,
					};
					this.scheduleTime.push(obj.scheduleTime);
				});
				this.scheduleTime = this.scheduleTime.filter(function (s) {
					return s && s.trim();
				});
				for (var i = 0; i < this.scheduleTime.length && this.scheduleTime[i] != null; i++) {
					this.scheduleTime[i] = this.scheduleTime[i].substr(0, 10);
				}
			}
		},
		GameDetails(e) {
			console.log(e);
		},
	},
};
</script>

<style scoped lang="scss">
.is-selected {
	color: #1989fa;
}
.messageBox {
	width: 100%;
	margin-bottom: 10px;
	font-size: 15px;
	background-color: rgb(240, 249, 235);
	// height: 50px;
}

.messageBoxSon {
	display: inline-block;
	white-space: nowrap;
	animation: 10s messageBoxSon linear infinite normal;
}
</style>
